<template>
  <div class="orderDetail">
    <iu-header>
      <template #left>
        <x-icon
          @click="spotCheckView"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>
        工单信息
      </template>
      <template #right>
        <!-- <img
          src="../../assets/svg/share.svg"
          style="width:26px;margin-right: 6px;opacity: .9;"
          @click="eventShare"
          alt=""
        /> -->
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>

    <div
      class="deviceInfo"
      :style="{
        height: 'calc(100vh - ' + inlinePx2Rem(subScrollBoxHeight) + ')'
      }"
    >
      <div class="info_list">
        <ul class="info">
          <li>
            <span class="title">工单编号</span>
            <span class="titleContent">{{ workSheet.sn }}</span>
            <span class="toggle" @click="toggleFn">
              <span class="text">{{ isOpen == false ? "展开" : "收起" }}</span>
              <iconSvg
                :name="isOpen ? 'close' : 'open'"
                w="15px"
                h="9px"
              ></iconSvg>
            </span>
          </li>
          <li>
            <span class="title">优 先 级</span>
            <span class="titleContent" v-if="workSheet.priority == '1'">
              一般
            </span>
            <span class="titleContent" v-else-if="workSheet.priority == '2'">
              重要
            </span>
            <span class="titleContent" v-else-if="workSheet.priority == '3'">
              紧急
            </span>
          </li>
          <li>
            <span class="title">工单类型</span>
            <!-- <span class="titleContent" v-if="workSheet.type == 1">点巡检</span>
           <span class="titleContent" v-if="workSheet.type == 2">更换</span> -->
            <span class="titleContent" v-if="workSheet.type == 1">点巡检</span>
            <span class="titleContent" v-else-if="workSheet.type == 2">
              更换
            </span>
            <span class="titleContent" v-else-if="workSheet.type == 3">
              提醒
            </span>
            <span class="titleContent" v-else-if="workSheet.type == 4">
              维修
            </span>
            <span class="titleContent" v-else-if="workSheet.type == 5">
              预警
            </span>
            <span class="titleContent" v-else>未知类型</span>
          </li>
          <li>
            <span class="title">负责人</span>
            <span class="titleContent">{{ workSheet.leaderName || "无" }}</span>
          </li>
          <li>
            <span class="title">验收负责人</span>
            <span class="titleContent">{{
              workSheet.receiverName || "无"
            }}</span>
          </li>
          <li>
            <span class="title">处理人</span>
            <span class="titleContent">{{ workSheet.handler || "无" }}</span>
          </li>
          <li>
            <transition name="slide-fade">
              <ul v-show="isOpen">
                <li>
                  <span class="title">设备名称</span>
                  <span class="titleContent">{{ workSheet.deviceName }}</span>
                </li>
                <li>
                  <span class="title">设备编号</span>
                  <span class="titleContent">{{ workSheet.deviceCode }}</span>
                </li>
                <!-- <li v-if="workSheet.componentName">
                  <span class="title">部件名称</span> <span class="titleContent">{{workSheet.componentName}}</span>
                </li> -->

                <li>
                  <span class="title">设备地址</span>
                  <span class="titleContent">{{
                    workSheet.departmentName
                  }}</span>
                </li>

                <li v-if="workSheet.componentCode">
                  <span class="title">部件编号</span>
                  <span class="titleContent">{{
                    workSheet.componentCode
                  }}</span>
                </li>
              </ul>
            </transition>
          </li>
          <li class="files" v-if="workSheet.files && workSheet.files.length">
            <span class="title">附件</span>
            <span class="titleContent">
              <x-img
                v-for="(item, index) in workSheet.files"
                :src="item.url"
                :key="item.id"
                @click.native="showImage(index, workSheet.files)"
              ></x-img>
            </span>
          </li>
          <transition name="slide-fade">
            <ul
              v-show="
                isOpen &&
                  workSheet.overhaulFlag === 1 &&
                  workSheet.handleType === getWorkSheetHandleTypeNum.wcl
              "
            >
              <li>
                <span class="title">计划检修</span>
                <span class="titleContent">{{
                  workSheet.overhaulFlag === 0 ? "否" : "是"
                }}</span>
              </li>
              <li v-if="workSheet.overhaulDuration">
                <span class="title">检修工期</span>
                <span class="titleContent"
                  >{{ workSheet.overhaulDuration.toFixed(1) }} 小时</span
                >
              </li>
              <li v-if="workSheet.sparePartsPrepare">
                <span class="title">备件情况</span>
                <span class="titleContent">{{
                  workSheet.sparePartsPrepare ? "有" : "无"
                }}</span>
              </li>
              <li v-if="workSheet.overhaulMan">
                <span class="title" style="width:84px;margin-right:8px"
                  >检修负责人</span
                >
                <span class="titleContent">{{ workSheet.overhaulMan }}</span>
              </li>
              <li v-if="workSheet.overhaulContent">
                <span class="title">检修内容</span>
                <span class="titleContent">{{
                  workSheet.overhaulContent
                }}</span>
              </li>
              <li>
                <span class="title">推迟原因</span>
                <span class="titleContent">{{
                  workSheet.delayReasonType == 1
                    ? "待停产"
                    : workSheet.delayReasonType == 2
                    ? "无配件"
                    : workSheet.delayReasonType == 3
                    ? workSheet.delayReasonDescription
                    : ""
                }}</span>
              </li>
            </ul>
          </transition>

          <transition name="slide-fade">
            <ul
              v-show="
                isOpen &&
                  workSheet.overhaulFlag === 0 &&
                  workSheet.handleType === getWorkSheetHandleTypeNum.wcl
              "
            >
              <li>
                <span class="title">计划检修</span>
                <span class="titleContent">{{
                  workSheet.overhaulFlag === 0 ? "否" : "是"
                }}</span>
              </li>
              <li>
                <span class="title">延期时间</span>
                <span class="titleContent">{{ workSheet.overhaulDays }}天</span>
              </li>
              <li>
                <span class="title">推迟原因</span>
                <span class="titleContent">{{
                  workSheet.delayReasonType == 1
                    ? "待停产"
                    : workSheet.delayReasonType == 2
                    ? "无配件"
                    : workSheet.delayReasonType == 3
                    ? workSheet.delayReasonDescription
                    : ""
                }}</span>
              </li>
            </ul>
          </transition>

          <li>
            <span class="title">描 述</span>
            <span
              class="titleContent desc"
              @click="showDescDetails"
              ref="desc"
              :style="{ '-webkit-line-clamp': resetStyle ? 'unset' : '3' }"
              >{{ workSheet.description }}</span
            >
          </li>

          <li
            class="img_box"
            v-if="
              workSheet.businessPictureList &&
                workSheet.businessPictureList.length !== 0
            "
          >
            <div
              v-for="(item, index) in workSheet.businessPictureList"
              :key="index"
            >
              <img
                :src="item"
                @click="show(index)"
                class="previewer-demo-img"
              />
            </div>
            <div v-transfer-dom>
              <previewer
                :list="preImgList"
                ref="previewer"
                :options="options"
                @on-index-change="logIndexChange"
              ></previewer>
            </div>
          </li>
          <transition mode="out-in">
            <div class="record" @click="toList" v-if="isOpen && canShow">
              <img src="/static/img/finance.png" alt="" />
            </div>
          </transition>
        </ul>
      </div>

      <div class="deviceContent" ref="deviceContent">
        <div
          class="timeLine"
          v-for="(item, index) in workSheetDetail"
          :key="index"
        >
          <!-- <div class="timeleft">
            <p>{{item.updateTime | formatDate}}</p>
          </div> -->
          <div :class="index == 0 ? 'groupImg' : 'groupImg1'">
            <div class="imgBorder">
              <iconSvg
                name="geren"
                w="22px"
                h="22px"
                class="geren"
                v-if="
                  item.handleType != getWorkSheetHandleTypeNum.ygb &&
                    index == 0 &&
                    item.handleType != getWorkSheetHandleTypeNum.tccl
                "
              ></iconSvg>
              <p class="borderSty" v-else>
                {{ item.handleType | formatHandleType }}
              </p>
            </div>
            <iconSvg
              style="margin: 3px 6px;position:relative;top:-5px;"
              v-if="index != workSheetDetail.length - 1 && index == 0"
              name="arrow1"
              w="15px"
              h="15px"
            ></iconSvg>
            <iconSvg
              style="margin: 3px 6px;position:relative;top:-5px;"
              v-else-if="index != workSheetDetail.length - 1"
              name="arrow2"
              w="15px"
              h="15px"
            ></iconSvg>
            <div
              class="arrowLine"
              v-if="index != workSheetDetail.length - 1 && index == 0"
              style="border-left:2px dotted #456de6;height:85%;position:relative;left: 22px;top: -13px;"
            ></div>
            <div
              class="arrowLine"
              v-else-if="index != workSheetDetail.length - 1"
              style="border-left:2px solid #2c386e;height:85%;position:relative;left: 22px;top: -15px;"
            ></div>
          </div>
          <div class="timemiddle">
            <div class="workOrder_header_title">
              <div class="name_box">
                {{ item.actOperatorName || item.operatorName }}
              </div>
            </div>
            <div
              class="workOrder_content"
              :class="
                index == 0 && item.handleType !== getWorkSheetHandleTypeNum.ygb
                  ? 'mrt15'
                  : ''
              "
            >
              <div
                @click="goCommentDetails(item.id, item.workSheetCommentsDTOS)"
              >
                <p v-if="index !== workSheetDetail.length - 1">
                  {{ item.description }}
                </p>
                <div class="files" v-if="item.files && item.files.length">
                  附件：
                  <div
                    class="list-item"
                    v-for="ele in item.files"
                    :key="ele.id"
                  >
                    <img :src="ele.url" alt="" object-fit="contain" />
                  </div>
                </div>
                <div
                  class="comment_reply"
                  v-if="
                    item.workSheetCommentsDTOS &&
                      item.workSheetCommentsDTOS.length !== 0
                  "
                >
                  <p
                    v-for="(commentItem,
                    commentIndex) in item.workSheetCommentsDTOS"
                    :key="commentIndex"
                  >
                    {{ commentItem.commenterName }}：{{
                      commentItem.description
                    }}
                  </p>
                </div>
              </div>

              <p class="time_wrapper">
                {{ item.createTime | formatDate }}
                <a href="javascript:;" class="comment">
                  <iconSvg
                    class="comment_icon"
                    v-if="
                      item.id &&
                        isShowCommentIcon(
                          index,
                          item.workSheetCommentsDTOS.length
                        )
                    "
                    name="comment"
                    w="12px"
                    h="10px"
                    @click.native="showCommentImput(item.workSheetId, item.id)"
                  ></iconSvg>
                  <span v-if="item.commentsNum !== '0'">{{
                    item.commentsNum
                  }}</span>
                </a>
              </p>
              <!-- </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="processWrap" v-if="buttonShow">
      <button @click="chooseLeader">工单处理</button>
    </div>

    <div v-transfer-dom>
      <x-dialog
        v-model="showDialog"
        class="comment_dialog"
        dialog-transition="slideUp"
        :hide-on-blur="true"
        :dialog-style="{
          'max-width': '100%',
          width: '100%',
          'background-color': '#1E1F37!important'
        }"
      >
        <div class="comment_input_box">
          <div class="comment_input_body">
            <x-textarea
              v-model="comment_content"
              class="comment_textarea"
              :max="100"
              :show-counter="false"
              placeholder="请输入工单评论，最多不得超过100字"
              @on-blur="recovery"
              ref="textarea"
              :width="335"
              :height="134"
            ></x-textarea>
            <!-- <p :class="{set_color: set_color, font_num: true}">{{text_num}}/200个字</p> -->
          </div>
          <button class="confirm_btn" @click="addComment" :disabled="!isAllow">
            确认
          </button>
        </div>
      </x-dialog>
    </div>
    <!-- <shortcut-menu></shortcut-menu> -->
    <showImg
      :list="fileList"
      :index="showImgIndex"
      :show.sync="showImg"
    ></showImg>
  </div>
</template>

<script>
import {
  Flexbox,
  FlexboxItem,
  XDialog,
  XTextarea,
  TransferDomDirective as TransferDom,
  XImg
} from "vux";
import iuHeader from "@/components/common/header/index";
import ShortcutMenu from "../../components/common/shortcut_menu.vue";
import WorkSheetDao from "@/daos/work_sheet_dao";
import { Previewer } from "vux";
/* import BScroll from "better-scroll"; */
import { mapGetters } from "vuex";
import showImg from "@/components/common/showImg/showImg";
export default {
  directives: {
    TransferDom
  },
  inject: ["backToHomepage"],
  components: {
    Flexbox,
    FlexboxItem,
    XImg,
    "shortcut-menu": ShortcutMenu,
    /* BScroll, */
    XDialog,
    showImg,
    XTextarea,
    Previewer,
    iuHeader
  },
  data() {
    return {
      canShow: true, //有部件和设备才显示
      buttonShow: false,
      show2: false,
      workSheetInfo: {},
      workSheetDetail: {},
      workSheet: {},
      type: "",
      picture: "",
      statusType: 0,
      showDialog: false,
      comment_content: "",
      id: "",
      isAllow: false,
      isOpen: false,
      subScrollBoxHeight: "",
      userInfo: "",
      descH: 0,
      resetStyle: false,
      preImgList: [],
      fileList: [],
      submitorName: "",
      showImgIndex: 0,
      imgUrl: "",
      showImg: false,
      priority: ["", "一般", "重要", "紧急"],
      sheetTypeText: ["", "点巡检", "更换", "提醒", "维修", "预警"],
      options: {
        getThumbBoundsFn(index) {
          let thumbnail = document.querySelectorAll(".previewer-demo-img")[
            index
          ];
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          let rect = thumbnail.getBoundingClientRect();
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
        }
      }
    };
  },
  filters: {
    formatHandleType(val) {
      let text = "";
      switch (val) {
        case 0:
          text = "上报";
          break;
        case 2:
          text = "上报";
          break;
        case 3:
          text = "转办";
          break;
        case 4:
          text = "驳回";
          break;
        case 7:
          text = "推迟";
          break;
        case 9:
          text = "解决";
          break;
        case 11:
          text = "关闭";
          break;
        default:
          text = "";
          break;
      }
      return text;
    }
  },
  created() {
    // this.getRouterInfo();
  },
  mounted() {},
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getUser();
    });
  },
  watch: {
    comment_content: {
      handler() {
        let l = this.comment_content.replace(/\s*/g, "").length;
        if (l > 0) {
          this.isAllow = true;
        } else {
          this.isAllow = false;
        }
      }
    },
    workSheet: {
      handler() {
        this.$nextTick(() => {
          this.descH = this.$refs.desc.offsetHeight;
        });
      }
    }
  },
  computed: {
    ...mapGetters([
      "getWorkSheetSatatusNum",
      "getWorkSheetHandleTypeNum"
      // ...
    ])
  },
  methods: {
    initWx() {
      if (typeof wx !== "undefined") {
        let localUrl = location.href.split("#")[0];
        this.$http(
          this.$API.getWxSign,
          { url: encodeURIComponent(localUrl) },
          true
        ).then(res => {
          if (res) {
            wx.config({
              debug: false,
              appId: res.appId, // 必填,公众号的唯一标识
              timestamp: res.timestamp, // 必填,生成签名的时间戳
              nonceStr: res.nonceStr, // 必填,生成签名的随机串
              signature: res.signature, // 必填,签名
              jsApiList: [
                "updateAppMessageShareData",
                "updateTimelineShareData",
                "onMenuShareAppMessage", //旧的接口，即将废弃
                "onMenuShareTimeline" //旧的接口，即将废弃
              ] // 必填,需要使用的JS接口列表
            });
            /* 处理失败验证 */
            wx.error(function(res) {
              console.log("res:====>", res);
              // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
            });
            wx.ready(() => {
              let shareData = {
                title: `${this.priority[this.workSheet.priority]}${
                  this.sheetTypeText[this.workSheet.type]
                }工单 ${this.workSheet.sn}`, // 分享标题
                desc: this.workSheet.description, // 分享描述
                link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl:
                  "https://static-a1b2.iuyun.com/c070c076-596a-4857-8688-60f9a8230612.png", // 分享图标
                success: function() {
                  // 用户点击了分享后执行的回调函数
                  console.log("success");
                }
              };
              wx.updateAppMessageShareData(shareData);
              wx.updateTimelineShareData(shareData);
              try {
                wx.onMenuShareAppMessage(shareData);
                wx.onMenuShareTimeline(shareData);
              } catch (e) {}
            });
          }
        });
      }
    },
    toList() {
      this.$router.push({
        path: "/workSheetHomePage/workOrderFinance",
        query: {
          id: this.workSheet.sn,
          departmentId: this.workSheet.deviceDepartmentId
        }
      });
    },
    showDescDetails() {
      if (this.descH >= 60) {
        this.resetStyle = !this.resetStyle;
      } else {
        this.resetStyle = false;
      }
    },
    isShowCommentIcon(index, l) {
      // console.log(this.type)
      // console.log(this.workSheet.status);
      if (this.workSheet.status == 2) {
        //已处理
        if (index == 0 || l == 0) {
          return false;
        }
        return true;
      } else {
        return true;
      }
    },
    toggleFn() {
      this.isOpen = !this.isOpen;
    },
    spotCheckView() {
      // history.back(-1);
      this.$router.push("/workSheetHomePage");
    },
    recovery() {
      window.scroll(0, 0);
    },
    goCommentDetails(workSheetHandleId, length) {
      if (!length) {
        return;
      }
      this.$router.push({
        path: "/commentDetails",
        query: {
          workSheetHandleId: workSheetHandleId,
          type: this.workSheet.status
        }
      });
    },
    showCommentImput(workSheetId, id) {
      if (this.workSheet.status == this.getWorkSheetSatatusNum.ygb) {
        this.$commom.alert("已完结工单不可评论");
      } else {
        this.checkCommentAuth(workSheetId, id);
      }
    },
    showVuePopup(flag) {
      this.show2 = flag;
    },
    // check 是否有评论权限
    checkCommentAuth(workSheetId, id) {
      WorkSheetDao.getWorkSheetAccessComment({ workSheetId }, res => {
        if (res.data == true) {
          this.showDialog = true;
          this.$refs.textarea.focus();
          this.id = id;
        } else {
          this.$commom.alert("您没有评论权限");
        }
      },err=>{
        
            });
    },
    // 添加评论
    addComment() {
      WorkSheetDao.postWorkSheetSaveComment(
        { workSheetHandleId: this.id, description: this.comment_content },
        res => {
          console.log(res);
          this.getListData(); // 更新列表
          this.comment_content = ""; // 重置内容
          this.id = ""; // 重置id
          this.showDialog = false; //收起评论框
        }
      );
    },
    inlinePx2Rem(n) {
      let b = 1 / 37.5;
      let r = n * b;
      return r + "rem";
    },
    getUser() {
      this.$http(this.$API.getUserInfo, {}, true).then(res => {
        this.userInfo = res;
        this.getListData();
      });
    },
    getListData() {
      let id = this.$route.query.id;
      WorkSheetDao.getWorkSheetDetail(
        { id },
        data => {
          if (data) {
            this.workSheet = data;
            if (!this.workSheet.deviceName && !this.workSheet.componentName) {
              this.canShow = false;
            }
            this.preImgList = [];
            if (this.workSheet.businessPictureList) {
              this.workSheet.businessPictureList.forEach(item => {
                this.preImgList.push({
                  src: item,
                  msrc: item
                });
              });
            }
            if (this.workSheet.deviceCode) {
              this.isOpen = true;
            }
            this.initWx();
            // 工单处理记录
            WorkSheetDao.getWorkSheetHandleList({ id }, handleData => {
              this.workSheetDetail = handleData;
              if (
                this.workSheet.status == this.getWorkSheetSatatusNum.ygb ||
                this.workSheet.handleType ==
                  this.getWorkSheetHandleTypeNum.yjj ||
                this.workSheet.handleType ==
                  this.getWorkSheetHandleTypeNum.ygb ||
                this.workSheetDetail[0].operator !== this.userInfo.id
              ) {
                this.buttonShow = false;
                this.subScrollBoxHeight = 44;
              } else {
                this.buttonShow = true;
                this.subScrollBoxHeight = 84;
              }
              if (
                this.workSheet.status === this.getWorkSheetHandleTypeNum.yjj &&
                this.workSheetDetail[0].operator === this.userInfo.id
              ) {
                this.buttonShow = true;
                this.subScrollBoxHeight = 84;
              }
            });
          }
        },
        (desc) => {
          this.$vux.toast.show({ text: desc, type: "warn" });
          setTimeout(() => {
            this.spotCheckView();
          }, 500);
        }
      );
    },
    chooseLeader() {
      this.$store.commit("saveWorkSheetInfo", this.workSheet);
      this.$router.push({
        name: "submitWorkOrder",
        query: {
          departmentId: this.workSheet.departmentId,
          workSheetId: this.$route.query.id,
          type: this.workSheet.type
        }
      });
    },
    logIndexChange(arg) {},
    showImage(index, files) {
      this.fileList.splice(0, this.fileList.length);
      this.fileList = files.map(e => e.url);
      this.showImgIndex = index;
      this.showImg = true;
    },
    show(index) {
      this.$refs.previewer.show(index);
    }
  }
};
</script>

<style lang="less" scoped>
* {
  touch-action: none;
}
.orderDetail {
  // padding-top: 44px;
  box-sizing: border-box;
  height: auto;
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #18182c;
  .backHistory {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
    -o-transform: rotate(90deg);
    line-height: 44px;
    font-size: 25px !important;
    margin-left: 10px;
  }
  .iu-nav-bar {
    background-color: #22233f;
  }
  .pageTop {
    height: 44px;
    color: #fff;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: #22233f;
    .workOrderDetails_header_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
    }
    .home {
      float: right;
      line-height: 44px;
      font-size: 17px;
      margin-right: 15px;
    }
  }
  .processWrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }
  .processWrap button {
    height: 40px;
    width: 100%;
    background-color: #2c386eff;
    border: none;
    color: #fff;
    font-size: 16px;
    left: 15%;
  }
}
.deviceInfo {
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  .info_list {
    margin-top: 10px;
    padding: 0 13px 10px;
    background: #22233f;
  }
}
.info {
  position: relative;
  // line-height: 0.7rem;
  font-size: 16px;
  padding-top: 7px;
  li {
    // line-height: 30px;
    margin-bottom: 6px;
    position: relative;
    display: flex;
    .openOrHide {
      overflow: hidden;
    }
    .toggle {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      color: rgba(255, 255, 255, 0.5);
      .text {
        font-size: 12px;
      }
    }
    &.img_box {
      padding-left: 95px;
      div {
        margin: 0 5px;
        width: 54px;
        height: 54px;
      }
    }
  }
}
.files {
  display: flex;
  .title {
    flex: none;
  }
  .titleContent {
    flex: auto;
  }
}
.title {
  display: inline-block;
  width: 80px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  margin-right: 30px;
  text-align: justify;
  text-align-last: justify;
  flex: none;
  &::after {
    position: absolute;
    display: inline-block;
    content: "";
    overflow: hidden;
    width: 100%;
    height: 0;
  }
}
.titleContent {
  font-size: 15px;
  color: #fff;
  &.desc {
    display: inline-block;
    // line-height: 24px;/* no */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  img {
    max-width: 100px;
    height: auto;
    margin-bottom: 8px;
    margin-right: 8px;
  }
}

.timeLine {
  display: flex;
  color: #fff;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
.timeleft {
  width: 20%;
}
.groupImg {
  width: 14%;
  text-align: center;
  position: relative;
  top: -5px;
  .imgBorder {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 4em;
    background: #456de6ff;
    line-height: 35px;
    text-align: center;
    margin: 2px 4px;
    .geren {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .borderSty {
      color: #fff;
      font-size: 12px;
      position: relative;
      line-height: 40px;
    }
    .text4 {
      position: relative;
      color: #fff;
      font-size: 9px;
      line-height: 16px;
      padding-top: 4px;
    }
  }
}

.groupImg1 {
  width: 14%;
  text-align: center;
  position: relative;
  top: -5px;
  .imgBorder {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 4em;
    background: #2c386eff;
    line-height: 35px;
    text-align: center;
    margin: 2px 4px;
    &::before {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      background: #22233f;
      top: -6px;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .borderSty {
      color: #fff;
      font-size: 12px;
      position: relative;
      line-height: 40px;
    }
    .text4 {
      position: relative;
      color: #fff;
      font-size: 9px;
      line-height: 16px;
      padding-top: 4px;
    }
  }
}
.timemiddle {
  /* width: 75%; */
  flex: 3;
  padding-left: 5px;
  position: relative;
  top: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  .workOrder_header_title {
    font-size: 14px;
    overflow: hidden;
    .name_box {
      width: 75%;
      float: left;
      text-align: left;
    }
    .status {
      width: 25%;
      float: right;
      text-align: right;
    }
  }
  .workOrder_content {
    /* width:75%;
      height:85%; */
    word-break: break-all;
    margin-top: 5px;
    font-size: 16px;
    &.mrt15 {
      margin-top: 15px;
    }
    .files {
      color: #eee;
      font-size: 14px;
      flex-wrap: wrap;
      display: flex;
      align-items: center;
      .list-item {
        img {
          width: 24px;
          height: auto;
          max-height: 100%;
          margin-right: 6px;
        }
      }
    }
  }
  .comment_reply {
    margin-top: 5px;
    padding: 10px;
    border-radius: 2px;
    background: #18182c;
    p {
      font-size: 13px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .time_wrapper {
    font-size: 12px;
    padding: 5px 0;
    .comment {
      position: absolute;
      padding: 6px 10px;
      bottom: 0px;
      right: -10px;
      color: #fff;
      .comment_icon {
        margin-right: 4px;
      }
    }
  }
}
.confirm_btn {
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  background: initial;
  font-size: 18px;
  line-height: 44px;
  color: #456de6ff;
  &:disabled {
    color: #3c4b8fff;
  }
}

/* iphone6 plus */
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  .arrowLine {
    position: relative !important;
    left: 22px !important;
    top: -13px !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 414px) {
  .arrowLine {
    position: relative !important;
    left: 23px !important;
  }
  .groupImg {
    .imgBorder {
      height: 40px !important;
      width: 40px !important;
    }
  }

  .groupImg1 {
    .imgBorder {
      height: 40px !important;
      width: 40px !important;
    }
  }
}

.timeImg {
  width: 25px;
  height: 25px;
  position: absolute;
  left: 29%;
  // margin-top: 5px;
  // bottom: 2rem;
}
.deviceContent {
  padding: 10px 13px;
  box-sizing: border-box;
  background: #22233f;
  margin-top: 10px;
  min-height: 72%;
}
.deviceContent .timeLine:last-child .timemiddle {
  border: none;
}

.slide-out-in-enter-active {
  height: auto;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}
.slide-fade-leave-active {
  height: auto;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}
.slide-fade-enter,
.slide-fade-leave-to {
  height: 0;
}

/*  .slide-enter-active {
      animation-name: slideInUp;
      animation-duration: 0.2s;
      animation-fill-mode: both;
  }
  .slide-leave-active {
      animation-name: slideOutDown;
      animation-duration: 0.2s;
      animation-fill-mode: both;
  }
  @keyframes slideInUp {
      0% {
          transform: translate3d(0, 100%, 0);
          visibility: visible;
      }

      to {
          transform: translateZ(0);
      }
  }
  @keyframes slideOutDown {
      0% {
          transform: translateZ(0);
      }

      to {
          visibility: hidden;
          transform: translate3d(0, 100%, 0);
      }
  }
  .delay-leave-active {
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      -o-animation-delay: 0.2s;
      animation-delay: 0.2s;
  } */

.flex-demo {
  text-align: center;
  color: #fff;
  background-color: #323465;
  border-radius: 4px;
  background-clip: padding-box;
  height: 125px;
  /*line-height: 125px;*/
  img {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }
  .lineImg1 {
    margin-top: 35px;
  }
  .lineImg2 {
    margin-top: 20px;
  }
}
.container {
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent #456de6 transparent;
  position: relative;
  right: 48px;
  top: 45px;
}
</style>
<style lang="less">
.comment_dialog {
  .weui-dialog {
    top: unset;
  }
}
.comment_textarea {
  font-size: 15px;
  .weui-textarea {
    &::-webkit-input-placeholder {
      color: #999999ff !important;
      font-size: 15px !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
    }
    padding-left: 10px;
    padding-top: 10px;
    background: transparent;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
  }
}
.record {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: #456de6ff;
  touch-action: none;
  z-index: 999;
  text-align: center;
  line-height: 55px;
  img {
    width: 20px;
    height: 20px;
  }
}
</style>
